<template>
    <page-header-wrapper>
        <a-card :bordered="false">
            <div class="table-operator">
                <a-button type="warning" icon="arrow-left" @click="handleBack">返回</a-button>
                <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
                <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
                    <a-menu slot="overlay">
                        <a-menu-item  @click="handleDelete"  key="1"><a-icon type="delete"/>删除</a-menu-item>
                    </a-menu>
                    <a-button style="margin-left: 8px">
                        批量操作
                        <a-icon type="down"/>
                    </a-button>
                </a-dropdown>
            </div>
            <s-table
                    ref="table"
                    size="default"
                    rowKey="id"
                    :columns="columns"
                    :data="loadData"
                    :alert="true"
                    :rowSelection="rowSelection"
                    showPagination="true"
            >
<!--                操作-->
                <span slot="action" slot-scope="text, record">
                  <template>
                    <a @click="handleUpdate(record)">修改</a>
                  </template>
                </span>
            </s-table>

            <create-type-option-form
                    ref="createModal"
                    :visible="visible"
                    :loading="confirmLoading"
                    :model="createModal"
                    @cancel="handleCancel"
                    @ok="handleOk"
            />
        </a-card>
    </page-header-wrapper>
</template>

<script>
    import moment from 'moment'
    import { STable, Ellipsis } from '@/components'

    import StepByStepModal from '../list/modules/StepByStepModal'
    import CreateTypeOptionForm from './modules/CreateTypeOptionForm'
    import {
        questionTypeOptionSave,
        questionTypeOptionList,
        questionTypeOptionDelete
    } from "../../api/questionTypeOption";

    const columns = [
        {
            title: '内容',
            dataIndex: 'name',
        },
        {
            title: '创建时间',
            dataIndex: 'created_at',
            sorter: true
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' }
        }
    ]
    const createModal = {// 新增的类型模型
        id: 0,
        question_type_id: 0,
        name: '',
    }
    export default {
        name: 'QuestionTypeOptionList',
        components: {
            STable,
            Ellipsis,
            CreateTypeOptionForm,
            StepByStepModal,
        },
        data() {
            this.columns = columns
            return {
                // create model
                visible: false,
                confirmLoading: false,
                createModal: createModal,
                // 高级搜索 展开/关闭
                advanced: false,
                // 查询参数
                queryParam: this.$route.query,
                // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    const requestParameters = Object.assign({}, parameter, this.queryParam)
                    return questionTypeOptionList(requestParameters)
                        .then(res => {
                            return res.data
                        })
                },
                selectedRowKeys: [],
                selectedRows: []
            }
        },
        created() {
            createModal.question_type_id = this.$route.query.question_type_id
        },
        computed: {
            rowSelection() {
                return {
                    selectedRowKeys: this.selectedRowKeys,
                    onChange: this.onSelectChange
                }
            }
        },
        methods: {
            tableInit() { // 表格初始化
                this.$refs.table.refresh(true)
                this.$refs.table.clearSelected()
            },
            handleBack() { // 返回
                this.$router.push({ path: '/questionType/list' } ) // 传递id过去
            },
            handleAdd() {
                this.createModal = createModal
                this.visible = true
            },
            handleUpdate(record) {
                this.visible = true
                this.createModal = { ...record }
            },
            handleDelete() { // 删除
                questionTypeOptionDelete({ ids: this.selectedRowKeys })
                    .then((res)=> {
                        if (res.code > 0) {
                            this.$message.success(res.data)
                            this.tableInit()
                        }else{
                            this.$message.error(res.data)
                        }
                    }).catch((err)=> {
                    console.log(err)
                });
            },
            handleCancel() {
                this.visible = false
                const form = this.$refs.createModal.form
                form.resetFields() // 清理表单数据（可不做）
            },
            handleOk(e) { // 新增，修改
                this.confirmLoading = true;
                questionTypeOptionSave(this.$refs.createModal.model)
                    .then((res)=> {
                        if (res.code > 0) {
                            this.visible = false
                            this.$message.success(res.data)
                            this.tableInit()
                        }else{
                            this.$message.error(res.data)
                        }
                        this.confirmLoading = false;
                    }).catch((err)=> {
                    this.confirmLoading = false;
                    console.log(err)
                });
            },
            getCurrentStyle(current, today) {
                const style = {};
                if (current.date() === 1) {
                    style.border = '1px solid #1890ff';
                    style.borderRadius = '50%';
                }
                return style;
            },
            onSelectChange(selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            },
            toggleAdvanced() {
                this.advanced = !this.advanced
            },
            resetSearchForm() {
                this.queryParam = {
                    date: moment(new Date())
                }
            }
        }
    }
</script>
